<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
    <link rel="stylesheet" href="css/index.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
      }
      .topHeaderleft p {
        float: left;
        margin-right: 20px;
      }
      .productList-con {
        width: 1200px;
        margin: 0 auto;
      }

      .productList-con li {
        float: left;
        width: 240px;
        height: 425px;
      }

      .productPicture {
        width: 240;
        height: 220px;
      }

      .productPicture a {
        display: block;
        width: 220px;
        height: 220px;
        margin-left: 10px;
        margin-top: 5px;
      }

      .productPrice {
        width: 210px;
        height: 24px;
        line-height: 24px;
        margin: 0 auto 5px;
        color: #e4393c;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .productTitle {
        width: 210px;
        height: 36px;
        margin: 0 auto 6px;
        overflow: hidden;
        color: #333;
      }

      .productBuy {
        width: 210px;
        height: 26px;
        margin: 0 auto 5px;
        white-space: nowrap;
      }
      .shuLiang {
        float: left;
        overflow: hidden;
        border: 1px solid #cecece;
        border-radius: 2px;
      }

      .shuLiang span {
        color: #cecece;
        float: left;
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 14px;
      }
      .shuLiang input {
        float: left;
        display: block;
        width: 30px;
        height: 26px;
        line-height: 26px;
        padding: 0;
        text-align: center;

        border: none;
        border-left: 1px solid #dbdbdb;
        border-right: 1px solid #dbdbdb;
      }

      .buy {
        width: 100px;
        height: 26px;
        float: right;
        border: 1px solid #dbdbdb;
        /* overflow: hidden; */
      }
      .buy a {
        height: 26px;
        text-align: center;
        line-height: 26px;
        color: #999;
        cursor: pointer;
        border-radius: 2px;
        display: block;
        background-position: -243px -4px;
      }
    </style>
  </head>
  <body>
    <div class="topHeader">
      <div class="topHeadercon">
        <div class="topHeaderleft">
          <p class="greeting">欢迎来酒仙网！</p>
          <a href="" class="headerlogin">请登录</a>
          <a href="" class="headerregist">免费注册</a>
        </div>
        <div class="topHeaderright">
          <ul class="yiji">
            <li class="xiala">
              <a href="">我的酒仙</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>我的订单</li>
                <li>物流跟踪</li>
                <li>我的优惠券</li>
              </ul>
            </li>
            <li>
              <a href="">CEO邮箱</a>
            </li>
            <li>
              <s class="icon-gouwuche"></s>
              <a href="">购物车0件</a>
            </li>
            <li>
              <a href="">CLUB会员</a>
              <span>|</span>
            </li>
            <li>
              <a href="">招商入驻</a>
              <span>|</span>
            </li>
            <li class="xiala">
              <s class="phone"></s>
              <a href="">手机逛酒仙</a>
              <span>|</span>
              <p class="erji">
                <img src="img/jxPho-code.jpg" alt="" />
              </p>
            </li>

            <li class="xiala">
              <s class="wzdh"></s>
              <a href="">网站导航</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>购物</li>
                <li>活动</li>
                <li>其它</li>
              </ul>
            </li>
            <li class="xiala">
              <s class="kffw"></s>
              <a href="">客服服务</a>
              <s class="dropicon"></s>
              <ul class="erji">
                <li>常见问题</li>
                <li>配送说明</li>
                <li>售后服务</li>
              </ul>
            </li>
            <li class="toplast">客服热线 <i>400-617-9999</i></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头部banner -->
    <div class="topbanner"></div>
    <!-- 头部搜索 -->
    <div class="topmidHeader">
      <div class="topheader">
        <div class="logo">
          <p>
            <a href="index.html"><img src="img/logo.png" alt="" /></a>
          </p>
          <p>
            <a href="index.html"><img src="img/01.gif" alt="" /></a>
          </p>
        </div>
        <div class="search">
          <div class="searchHome">
            <form action="" method="GET">
              <input type="text" class="searchArea" />
              <input type="submit" value="搜&nbsp;索" class="searchBtn" />
            </form>
          </div>
          <div class="hotwords">
            <p>
              <a href="">老酒<span>|</span></a>
              <a href="">茅台<span>|</span></a>
              <a href="">五粮液<span>|</span></a>
              <a href="">剑南春<span>|</span></a>
              <a href="">人头马<span>|</span></a>
              <a href="">酒鬼<span>|</span></a>
              <a href="">容大<span>|</span></a>
              <a href="">国台<span>|</span></a>
            </p>
          </div>
        </div>
        <div class="boxRight">
          <img src="img/headerProPic1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 主体导航 -->
    <div class="navwrap">
      <div class="nav">
        <div class="navcategorymenu">
          <h2>全部商品分类</h2>
        </div>
        <div class="navList">
          <a href="">首页</a>
          <a href=""
            >CLUB
            <span class="hot"></span>
          </a>
          <a href="">招商入驻</a>
          <a href="">沱牌舍得</a>
          <a href="">新品</a>
          <a href="">门店加盟</a>
        </div>
        <img src="img/02.gif" alt="" />
      </div>
    </div>
    <div class="productList-con" id="box"></div>
    <script src="js/cookie.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/jquery-1.11.0.js"></script>
    <script>
      window.onload = function () {
        // 请求商品列表
        /* function getCookie(k) {
          var arr = document.cookie.split("; ");
          for (var i = 0; i < arr.length; i++) {
            var arr1 = arr[i].split("=");
            if (arr1[0] === k) {
              return arr1[1];
            }
          }
        } */
        function loadData() {
          let url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
          let uid = 139664;
          axios
            .get(url, {
              params: {
                uid,
              },
            })
            .then((res) => {
              console.log(res.data.data);
              // 商品数组
              let arr = res.data.data;
              let str = "";
              arr.forEach((obj) => {
                str += ` <li>
                <div class="productPicture" data-id="${obj.pid}">
                   <a href="details.html"> <img  class="productImage"  src="${obj.pimg}" alt="" style="cursor: pointer;"></a>
                </div>
                <div class="productPrice">${obj.pprice}</div>
                <div class="productPrice">${obj.pdesc}</div>
                <div class="productBuy">
                    <div class="shuLiang">
                        <span class="sub">-</span>
                        <input class="amount1" type="text" value="1">
                        <span class="add">+</span>
                    </div>
                    <div class="buy">
                        <a data-id="${obj.pid}" class="mai">加入购物车</a>
                    </div>
                </div>
            </li>`;
              });
              let list = document.querySelector(".productList-con");
              list.innerHTML = str;
              // 商品数量加减
              let sub = document.querySelectorAll(".sub");
              let add = document.querySelectorAll(".add");
              let mai = document.querySelectorAll(".mai");
              let pImage = document.querySelectorAll(".productPicture");
              let oInputs = document.querySelectorAll(".amount1");
              for (let i = 0; i < sub.length; i++) {
                sub[i].onclick = function () {
                  let value = parseInt(this.parentNode.children[1].value);
                  if (value > 1) {
                    value--;
                  } else {
                    value = 1;
                  }
                  this.parentNode.children[1].value = value;
                };
                add[i].onclick = function () {
                  let value = parseInt(this.parentNode.children[1].value);
                  value++;
                  this.parentNode.children[1].value = value;
                };
                mai[i].onclick = function () {
                  let pid = this.getAttribute("data-id");
                  let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
                  let uid = 139664;
                  let pnum = parseInt(oInputs[i].value);
                  axios
                    .get(url, {
                      params: {
                        uid,
                        pid,
                        pnum,
                      },
                    })
                    .then((res) => {
                      // alert(JSON.stringify(res.data));
                    });
                };
                //跳转详情页
                pImage[i].onclick = function () {
                  let pid = this.getAttribute("data-id");
                  localStorage.setItem("pid", pid);
                };
              }
            });
        }
        //获取购物车商品
        loadData();
        // 顶部用户名显示
        let topHeaderleft = document.getElementsByClassName("topHeaderleft")[0];
        /* function getCookie(k) {
          var arr = document.cookie.split("; ");
          for (var i = 0; i < arr.length; i++) {
            var arr1 = arr[i].split("=");
            if (arr1[0] === k) {
              return arr1[1];
            }
          }
        } */
        let str = "";
        let uname = getCookie("uname");
        if (document.cookie != "") {
          str = `<p>hi,${uname}</p>
            <a href="index.html">退出</a>
     `;
          topHeaderleft.innerHTML = str;
        }
      };
    </script>
  </body>
</html>
